<template>
  <div>
    <div class="emoji-box " v-show="showEmoji" ref="emojibox">
      <button
        class="pop-close"
        :plain="true"
        type="danger"
        size="mini"
        icon="close"
        @click="close()"
      >
        <i class="fa fa-times" aria-hidden="true"></i>
      </button>
      <div class="emoji">
        <ul class="emoji-controller">
          <li
            :key="index"
            v-for="(pannel, index) in pannels"
            @click="changeActive(index)"
            :class="{ active: index === activeIndex }"
          >
            {{ pannel }}
          </li>
        </ul>
        <ul class="emoji-container" ref="emoji_container">
          <template v-for="(emojiGroup, index) in emojis">
            <li style="padding: 0" :key="index" v-show="index === activeIndex">
              <a
                href="javascript:;"
                v-for="(emoji, index) in emojiGroup"
                :key="index"
                @click="selectItem(emoji)"
                @mouseover="showPreview(emoji, true)"
                @mouseout="showPreview(emoji, false)"
              >
                <span
                  class="emoji-item"
                  :class="'sprite-' + getPureName(emoji)"
                >
                  <img :src="getDirectoryName(emoji)" />
                </span>
              </a>
            </li>
          </template>
        </ul>
      </div>
      <span class="pop-arrow arrow"></span>
      <div class="emoji_preview" ref="emoji_preview">
        <img />
      </div>
    </div>
    <div class="emoji-wrapper" v-show="showEmoji" @click.self="close()"></div>
  </div>
  <!-- 遮罩 -->
</template>
<script lang="ts">
import { Component, Vue, Prop, Emit, Watch } from 'vue-property-decorator';
import data from './emoji-data';

@Component
export default class emoji extends Vue {
  $refs!: {
    emoji_container: HTMLElement;
    emoji_preview: HTMLElement;
    emojibox: HTMLElement;
  };

  //数据源
  private emojiData: any = data;

  //路径
  private path: string = '../resource/emoji2/';

  //tab
  private pannels: Array<string> = ['阿鲁', 'QQ', '微博', '贴吧', '旧贴吧'];

  private activeIndex: number = 0;

  //显示
  @Prop({ type: Boolean, required: false, default: false })
  showEmoji!: false;

  //内部使用
  get _showEmoji(): boolean {
    return this.showEmoji;
  }

  get emojis() {
    return this.pannels.map(item => Object.keys(this.emojiData[item]));
  }
  //方法
  public changeActive(index: number) {
    this.activeIndex = index;
  }

  public getPureName(name: string): string {
    return name.replace(/:/g, '');
  }

  public getDirectoryName(name: string) {
    var pureNameArray = this.getPureName(name).split('-');
    // return require("./resource/emoji2/阿鲁/1.png");
    // return require('./resource/emoji2/' +
    //   pureNameArray[0] +
    //   '/' +
    //   this.emojiData[pureNameArray[0]][name]);

    return (
      'https://qiniu.lvzhenhome.cn/' +
      pureNameArray[0] +
      this.emojiData[pureNameArray[0]][name]
    );
  }

  //选中emoji
  @Emit('select')
  selectItem(emoji: string) {
    return ' ' + emoji + ' ';
  }

  //关闭
  @Emit('close')
  close() {}

  showPreview(emoji: string, show: boolean) {
    let src = this.getDirectoryName(emoji);
    let img = this.$refs.emoji_preview.firstChild as HTMLImageElement;
    let containerWidth = this.$refs.emoji_container.clientWidth;
    let itemClass = 'sprite-' + this.getPureName(emoji);
    let itemLeft = (document.getElementsByClassName(
      itemClass
    )[0] as HTMLElement).offsetLeft;
    if (itemLeft <= containerWidth / 2) {
      this.$refs.emoji_preview.style.right = '15px';
      this.$refs.emoji_preview.style.left = 'auto';
    } else {
      this.$refs.emoji_preview.style.left = '5px';
      this.$refs.emoji_preview.style.right = 'auto';
    }
    img.src = src;
    this.$refs.emoji_preview.style.display = show ? 'block' : 'none';
  }

  // @Watch('showEmoji')
  // handleShowEmoji(newVal: boolean) {
  //   if (newVal) {
  //     this.$nextTick(() => {
  //       console.log(
  //         document.documentElement.scrollTop,
  //         this.$refs['emojibox'].offsetTop
  //       );
  //       if (
  //         document.documentElement.scrollTop <= this.$refs['emojibox'].offsetTop
  //       ) {
  //         this.$refs['emojibox'].style.transform = 'translateY(-120%)';
  //       } else {
  //         this.$refs['emojibox'].style.transform = 'none';
  //       }
  //     });
  //   }
  // }
}
</script>

<style lang="scss" scoped>
.emoji-box {
  box-shadow: 0 4px 20px 1px rgba(0, 0, 0, 0.2);
  background: white;
  margin-top: 10px;
  transform: translateY(-120%);
  position: absolute;
  z-index: 20;
  width: 80%;
  button {
    position: absolute;
    border: none;
    color: #ff4949;
    right: 24px;
    top: 12px;
    font-size: 15px;
    z-index: 10;
    background: none;
    &.pop-close:hover {
      cursor: pointer;
    }
  }

  .emoji {
    width: 100%;
    bottom: 30px;
    background: #fff;
    z-index: 10;
    padding: 10px;
    margin-right: 10px;

    .emoji-controller {
      height: 24px;
      overflow: hidden;
      margin-bottom: 0;
      margin-top: 0;
      li {
        list-style: none;
        float: left;
        // width: 76px;
        padding: 0 10px;
        font-size: 12px;
        line-height: 24px;
        cursor: pointer;
        text-align: center;
        position: relative;
        &.active::after {
          content: '';
          width: 100%;
          height: 1px;
          background: #0689dd;
          left: 0;
          bottom: 4px;
          position: absolute;
        }
        &.active {
          background: steelblue;
          color: white;
        }
      }
    }
    .emoji-container {
      height: 200px;
      overflow-y: auto;
      overflow-x: hidden;
      position: relative;
      margin-top: 5px;
      margin-bottom: 5px;
      li {
        font-size: 0;
        padding: 5px;
        a {
          float: left;
          overflow: hidden;
          height: 40px;
          width: 44px;
          transition: all ease-out 0.2s;
          border-radius: 4px;
          vertical-align: middle;
          text-align: center;
          .emoji-item img {
            max-width: 40px;
            max-height: 33px;
          }
          &:hover {
            background-color: #d8d8d8;
            border-color: #d8d8d8;
          }
          span {
            display: inline-block;
            border: 1px solid transparent;
            cursor: pointer;
          }
        }
      }
    }
  }

  .emoji_preview {
    position: absolute;
    top: 40px;
    border: 1px solid #c8c8c8;
    border-radius: 50%;
    width: 65px;
    height: 65px;
    background: #fff;
    text-align: center;
    line-height: 65px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.176);
    z-index: 2;
    display: none;
    pointer-events: none;
  }
}

.emoji-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>
